// import Taro from "@tarojs/taro";
import React, { useEffect, memo } from "react";
import { View } from "@tarojs/components";
import dayjs from "dayjs"
import { COLORS } from "@/utils/local-data";
import { formatDate, formatNumber } from "@/utils/fomatter"
import { EChart } from "../../echarts-taro3-react";
import { useSelector } from "react-redux"

import "./index.scss";



// interface dataType {
//   dimensions: any[],
//   source:any
// }

function TrendLine(props) {

  const { reportDetail } = useSelector(state => state.obsPool)
  let lineChart: any;
  useEffect(() => {
    let valueList = reportDetail?.otherList ?? []
    let seriesList: any = []



    let maxDate
    let minDate
    let intervalDate
    valueList.forEach(value => {
      let initDates = value.initDate!.split(',');
      let yieldRates = value.yieldRate!.split(',');
      // let yData = []
      // let xData = []
      let setiesItem = {
        name: value.fundName,
        type: 'line',
        symbol: "none",
        data: new Array<object>(),
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2// 0.1的线条是非常细的了
            },
          }
        },
      }
      for (let i in initDates) {
        let temp: Array<any> = []
        temp[0] = new Date(dayjs(initDates[i] + '')).getTime()
        temp[1] = Number(Number(yieldRates[i] ?? 0.0) * 100)
        if (!maxDate) {
          maxDate = temp[0]
        } else {
          if (temp[0] > maxDate) {
            maxDate = temp[0]
          }
        }
        if (!minDate) {
          minDate = temp[0]
        } else {
          if (temp[0] < minDate) {
            minDate = temp[0]
          }
        }
        setiesItem.data.push(temp)

      }
      seriesList.push(setiesItem)
    })
    let option = {
      color: COLORS,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
            formatter(data) {
              props.getData(data)

              if (data.axisDimension === "x") {
                return formatDate(data.value.toString(), null, 'YYYY/MM/DD')
              } else {
                return formatNumber(data.value, 2) + '%'
              }
            }
          }
        },
        showContent: false,

      },
      grid: {
        top: 10,
        left: 66,
        right: 36,
        bottom: 24,
        borderWidth: '0'
      },
      dataset: new Array<object>(),
      xAxis: {
        type: 'time',
        boundaryGap: false,
        min: 'dataMin' as string | number,
        max: 'dataMax' as string | number,
        interval: null as number,
        axisLine: {
          show: true,
          lineStyle: {       // 属性lineStyle控制线条样式
            color: '#E8EBEF',
            type: 'solid'
          },
          onZero: false

        },
        axisTick: {
          show: false,    // 是否显示坐标轴刻度
        },
        splitLine: {           // 分隔线
          show: false,        // 默认显示，属性show控制显示与否
        },

        axisLabel: {
          showMinLabel: true,
          showMaxLabel: true,
          textStyle: {
            color: '#B1B9C4'
          },
          formatter: function (value, i) {

            const date = value.toString()
            if (value == maxDate || value == minDate) {
              return formatDate(date, null, 'YYYY/MM/DD')
            } else {
              return ''
            }

          },
        },
      },
      yAxis: {
        type: 'value',
        min: 'dataMin' as string | number,
        max: 'dataMax' as string | number,
        interval: null as number,
        axisLine: {
          show: false,
          onZero: false,
          lineStyle: {       // 属性lineStyle控制线条样式
            color: '#E8EBEF',

          },
        },
        axisTick: {
          show: true
        },
        splitLine: {           // 分隔线
          show: false,        // 默认显示，属性show控制显示与否
          lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
            type: 'dotted',
            opacity: 1
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B1B9C4'
          },
          formatter: function (value) {
            return formatNumber(value, 2) + '%'
          },

        }
      },
      series: new Array<object>()



    }


    // option.xAxis.axisLabel = {
    //   interval: intervalDate
    // }


    // )
    // // 如果只有一条数据，拐点就设置未空心圆
    // if (setiesItem.data.length == 1) {
    //   setiesItem.symbol = 'emptyCircle'
    // }
    // let visibleMaximum = 0
    // let visibleMinimum = 0
    // let interval = 0
    // if (yData.length > 1) {
    //   yData = yData.sort((a, b) => a - b)

    //   visibleMaximum = yData[yData.length - 1]
    //   visibleMinimum = yData[0]
    //   interval = Number(((visibleMaximum - visibleMinimum) / 4).toFixed(4))

    //   visibleMaximum = visibleMaximum + interval
    //   visibleMinimum = visibleMinimum - interval


    //   if (visibleMinimum <= 0) {
    //     visibleMinimum = 0;
    //   }

    //   option.yAxis = {
    //     ...option.yAxis,
    //     min: visibleMinimum,
    //     max: visibleMaximum,
    //     interval: interval
    //   }
    // }
    // finalSeriesData.push(seriesList)
    // console.log(finalSeriesData, ":::::::::::");



    let obj = {
      ...option,
      series: seriesList,
    }

    lineChart.refresh(obj);
  }, [lineChart, reportDetail])


  let refLineChart = (node) => {

    lineChart = node
  }
  return (

    <View className='line-chart' >
      <EChart ref={refLineChart} canvasId='line1-chart' />
    </View >
  )
}

export default memo(TrendLine)
